<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "config/config.php";

// -----------------------------------------------------------------------------
?>
<!DOCTYPE html>
<html lang="zh">
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>登录</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">

</head>
<body class="bg-light">

<!-- ----------------------------------------------------------------------- -->

<!--div container start-->
<div class="container mt-5 mb-5">
    <form id="myform" action="">
        <div class="form-group">
            <label for="">用户</label>
            <input class="form-control"
                   id="inputUsername"
                   type="text"
                   autofocus autocomplete="off">
        </div>
        <div class="form-group mt-2">
            <label for="">密码</label>
            <input class="form-control"
                   id="inputPassword"
                   type="password">
        </div>
        <div class="form-group mt-2">
            <button class="btn btn-outline-primary"
                    id="btnLogin"
                    type="button">登录</button>
            <button class="btn btn-outline-secondary"
                    id="btnClear"
                    type="button">清空</button>
        </div>
    </form>
</div>
<!--div container end-->

<!-- ----------------------------------------------------------------------- -->

<script src="resources/jQuery/jquery-3.5.1.js"></script>
<script src="resources/crypto-js/crypto-js.js"></script>

<!-- ----------------------------------------------------------------------- -->

<script>
    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    $("#btnLogin").on("click", function () {

        var userName = $("#inputUsername").val();
        var password = $("#inputPassword").val();

        /* sha256 加密 */
        userName = CryptoJS.SHA256(userName).toString();
        password = CryptoJS.SHA256(password).toString();

        setCookie('<?php echo $cookieUsername; ?>', userName, <?php echo $dayKeepLoggedIn; ?>);
        setCookie('<?php echo $cookiePassword; ?>', password, <?php echo $dayKeepLoggedIn; ?>);
        window.location.href = "index.php";

    });

</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 点击清空按钮后执行
    $("#btnClear").on("click", function () {
        $("#inputUsername").val("");
        $("#inputPassword").val("");
        $("#inputUsername").focus();
    });
</script>

<!-- ----------------------------------------------------------------------- -->

<script type="text/javascript">

    // 输入框中按下回车键，自动点击登录按钮
    $(document).ready(function () {
        $("#inputUsername, #inputPassword").keydown(function (event) {
            if (event.key == "Enter") {
                $("#btnLogin").click()
            }
        });
    });

</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
